<template>
    <div id="conent">
        <h1>折叠面板案例：</h1>
        <div>
            <div>
                <div class="title">
                    <h3>程序之路</h3>
                    <span class="btn" @click="btn">
                        {{ isShow ? '展开' : '收起' }}
                    </span>
                </div>
            </div>
            <div class="conttext" v-show="isShow">
                <p>少时狂把编程想,</p>
                <p>无畏赴身IT行。</p>
                <p>纵使荣华未可近，</p>
                <p>我自coding又何妨！</p>
            </div>
        </div>
        
    </div>

</template>
<script>
export default {
    data() {
        return {
            isShow: true
        }
    },
    methods:{
        btn() { 
            this.isShow = !this.isShow
        }
    }
}

</script>
<style leng="less">
   body {
       background-color: #CCC;

       #conent {
           width: 400px;
           margin: 20px auto; /* 外边距 上下左右 居中展示 */
           background-color: #fff;
           border: 4px solid blueviolet; /* 边框 */
           border-radius: 1em; /* 边框圆角 */
           box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5); /* 阴影 */
           padding: 1em 2em 2em; /* 内边距  上下左右*/

           h3 {
               text-align: center;
           }

           .title {
               display: flex;
               justify-content: space-between;
               align-items: center;
               border: 1px solid #ccc;
               padding: 0 1em;
           }

           .title h4 {
               line-height: 2;
               margin: 0;
           }

           .conttext {
               border: 1px solid #ccc;
               padding: 0 1em;
           }

           .btn {
               /* 鼠标改成手的形状 */
               cursor: pointer;
           }
       }
   }
</style>